import React, { useEffect, useState } from 'react'
import Video from "react-native-video";
import { View, Text, TouchableOpacity, Slider, Image, StyleSheet, Modal, ImageBackground, ScrollView, BackHandler } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import Icon from 'react-native-vector-icons/AntDesign';
import { TextInput } from 'react-native-gesture-handler';

const Test = ({ navigation }) => {
    //监听回退事件
    const backAction = () => {
        navigation.navigate('home');
        return true;
    };
    useEffect(() => {
        BackHandler.addEventListener("hardwareBackPress", backAction);
      }, []);

    //歌曲数组
    let songList = [
        {
            name: 'Release',
            kind: '雨声|宁静|脚步',
            source: require('../../Audio/test1.mp3'),
            pic: ''
        },
        {
            name: 'Fight',
            kind: '战争|宏大|脚步',
            source: require('../../Audio/test2.mp3'),
            pic: ''
        },
        {
            name: 'Test3',
            kind: '..|Happy|脚步',
            source: require('../../Audio/test3.mp3'),
            pic: ''
        }
    ]
    //收藏数组
    let soucang = [
        {
            name: '雨吟春雷',
            kind: ['春雷', '夜雨', '舒缓']
        },
        {
            name: '夜雨',
            kind: ['夜晚', '夜雨', '安静']
        }
    ]

    //1.下端功能栏目
    //设置是否弹出
    const [modalVisible, setModalVisible] = useState([false, false, false]);

    //定时器
    //定时关闭的配置
    const timeList = [
        {
            title: '不开启',
            time: 0
        },
        {
            title: '5分钟',
            time: 0.5
        },
        {
            title: '25分钟',
            time: 25
        },
        {
            title: '45分钟',
            time: 45
        },
        {
            title: '60分钟',
            time: 60
        }

    ]
    const [clockList, setClockList] = useState([true, false, false, false, false]);
    //定时关闭功能定时器
    let timer1 = '';
    const [timer, setTimer] = useState(0);
    useEffect(() => {
        timer1 = setTimeout(() => {
            if (timer >= 1) {
                setTimer((timer) => --timer);
            } else {
                //执行停止播放操作
                changeState(0);
                setIconName('play');
                //改变定时的选中状态
                setClockList([true, false, false, false, false]);
            }
        }, 1000);
    }, [timer]);

    //评论歌曲的文字
    const [value, onChangeText] = useState('');

    //收藏功能
    const [record, setRecord] = useState('hearto');

    //2.歌曲
    //获取数组的长度
    let listLength = songList.length;
    //当前歌曲的位置
    const [songIndex, setSongIndex] = useState(0);
    //播放和暂停
    const [state, changeState] = useState(0);
    //歌曲的总时长
    const [time, setTime] = useState('');
    //歌曲的播放进度
    const [nowtime, setNowTime] = useState('00:00');
    //歌曲播放图标的设置
    const [iconName, setIconName] = useState('play');

    //主播放界面涉及到的方法
    //暂停播放的方法
    const changeVideo = () => {
        if (state == 0) {
            changeState(1);
            setIconName('pausecircle');
        } else {
            changeState(0);
            setIconName('play');
        }
    }
    //得到歌曲时间
    const getSingTime = (data) => {
        let singtime = data.duration;
        setTime(formatTime(singtime));
    }

    //得到当前播放事件
    const getNowTime = (data) => {
        setNowTime(formatTime(data.currentTime));
    }

    //格式化歌曲时间
    const formatTime = (time) => {
        //判断传入的是否为0 为0直接不显示
        if (time == 0) {
            return '';
        }
        //数组转字符串
        time = time + '';
        let index = time.indexOf('.');
        //进行去除小数点的工作
        if (index != -1) {
            time = time.slice(0, index);
            time = Number(time);
        }
        //实现格式
        let min = Math.floor(time / 60); //分钟数
        let second = time - min * 60; //秒数
        min = min >= 10 ? min : "0" + min;
        second = second >= 10 ? second : "0" + second;
        return min + ":" + second;
    }

    //播放上一首歌
    const playLastSong = () => {
        if (songIndex == 0) {
            return;
        } else {
            let newIndex = songIndex;
            setSongIndex(--newIndex);
            changeState(1);
            setIconName('pausecircle');
        }
    }

    //播放下一首歌
    const playNextSong = () => {
        if (songIndex == (listLength - 1)) {
            return;
        } else {
            let newIndex = songIndex;
            setSongIndex(++newIndex);
            //直接开始播放 图标改变
            changeState(1);
            setIconName('pausecircle');
        }
    }

    //歌曲播放完执行的行为
    const finishAction = () => {
        setNowTime(time);
        if (songIndex == (listLength - 1)) {
            return;
        } else {
            let newIndex = songIndex;
            setSongIndex(++newIndex);
            //直接开始播放 图标改变
            changeState(1);
            setIconName('pausecircle');
        }

    }


    return (
        <View>
            {/* 播放器的控制项目 */}
            <Video source={songList[songIndex].source}
                rate={state}
                playInBackground={true} //切到后台也可以播放
                onLoad={data => getSingTime(data)} //获取歌曲的总长度
                onProgress={e => {
                    if (state == 1) {
                        getNowTime(e);
                    }
                }} //获取歌曲的当前长度

                onEnd={() => finishAction()}
            />

            {/* 功能弹出区 */}
            {/* 定时器模块 */}
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible[0]}
                onRequestClose={() => {
                    setModalVisible([false, false, false]);
                }}
            >
                <View style={styles.centeredView}>
                    <View style={{ display: 'flex', width: w, height: h / 2, paddingLeft: 30, paddingRight: 30 }}>
                        <View style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', flex: 1, backgroundColor: 'white', borderRadius: 10, paddingLeft: 20, paddingRight: 20 }}>
                            <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <Text style={{ fontSize: 20, fontWeight: 'bold', marginTop: 6 }}>定时关闭</Text>
                            </View>
                            {
                                timeList.map((item, key) => {
                                    return (
                                        <TouchableOpacity key={key} style={styles.modelSonItem} onPress={
                                            () => {
                                                let newTimeList = [false, false, false, false, false];
                                                newTimeList[key] = true;
                                                setClockList(newTimeList);
                                                clearTimeout(timer1);
                                                setTimer(() => timeList[key].time * 60);
                                            }
                                        }>
                                            <Text>{item.title}</Text>
                                            {
                                                clockList.map((item, index) => {
                                                    if (item == true && key == index) {
                                                        return (
                                                            <Icon name="check" size={20} key={index}></Icon>
                                                        )
                                                    }
                                                })
                                            }
                                        </TouchableOpacity>

                                    )
                                })
                            }
                        </View>
                    </View>
                </View>
            </Modal>

            {/* 评论模块 */}
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible[1]}
                onRequestClose={() => {
                    setModalVisible([false, false, false]);
                }}
            >
                <View style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <View style={{ display: 'flex', width: w * 2 / 3, height: w * 1 / 3, backgroundColor: 'white', flexDirection: 'column', justifyContent: 'flex-end', borderRadius: 10 }}>
                        <TextInput style={{ flex: 4 }} placeholder='说点什么吧' multiline={true} numberOfLines={4}
                            onChangeText={text => onChangeText(text)}
                            value={value}
                        ></TextInput>

                        <TouchableOpacity style={{ flex: 1.5, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
                            <View style={{ backgroundColor: 'red', marginBottom: 5, marginRight: 5, borderRadius: 5 }}>
                                <Text style={{ color: 'white', fontSize: 14, height: 18, margin: 5 }}>发布</Text>
                            </View>

                        </TouchableOpacity>
                    </View>
                </View>

            </Modal>

            {/* 收藏列表区 */}
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible[2]}
                onRequestClose={() => {
                    setModalVisible([false, false, false]);
                }}
            >
                <View style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'flex-end' }}>
                    <View style={{ display: 'flex', width: w * 6 / 7, height: h * 2 / 3, backgroundColor: 'white', flexDirection: 'column', borderRadius: 10, marginBottom: 30, paddingRight: 10, paddingLeft: 10, paddingTop: 10 }}>
                        <Text style={{ fontSize: 26, fontWeight: 'bold', marginBottom: 10 }}>我喜欢的</Text>
                        <ScrollView style={{ flex: 1 }}>
                            {
                                soucang.map((item, key) => {
                                    return (
                                        <TouchableOpacity style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: 10 }} key={key}>
                                            <Text style={{ flex: 1, textAlign: 'center', color: '#AEAEAE' }}>{++key}</Text>
                                            <View style={{ display: 'flex', flexDirection: 'column', flex: 9 }}>
                                                <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 5 }}>{item.name}</Text>
                                                <View style={{ display: 'flex', flexDirection: 'row' }}>
                                                    {
                                                        item.kind.map((item, key) => {
                                                            return (
                                                                <View style={{ backgroundColor: '#F5F6FB', padding: 5, borderRadius: 5, marginRight: 10 }} key={key}>
                                                                    <Text style={{ color: '#B3B4B9' }}>{item}</Text>
                                                                </View>

                                                            )

                                                        })
                                                    }
                                                </View>
                                            </View>
                                        </TouchableOpacity>
                                    )
                                })
                            }
                        </ScrollView>
                    </View>
                </View>

            </Modal>


            {/* 界面区域 */}
            <LinearGradient
                colors=
                {[
                    '#AFAFB9',
                    '#CCCBD1',
                    '#E6E6E8',]
                }
            >
                <View style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>

                    {/* 歌曲封面的图标 */}
                    <Image source={require('../../Image/pic.jpg')} style={styles.pic}></Image>

                    {/* 显示歌曲播放进度 */}
                    <Text style={{ marginTop: pth(15), fontSize: 18, color: '#B2B2BC' }}>{nowtime}----{time}</Text>

                    {/* 显示歌名 */}
                    <Text style={{ fontWeight: 'bold', fontSize: 34, marginTop: pth(7) }}>{songList[songIndex].name}</Text>

                    {/* 显示标签 */}
                    <Text style={{ fontSize: 23, marginTop: pth(6), color: '#B9BABF' }}>{songList[songIndex].kind}</Text>

                    {/* 播放等按钮 */}
                    <View style={{ width: ptd(300), marginTop: pth(12), display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
                        {/* 上一首歌 */}
                        <TouchableOpacity onPress={() => playLastSong()}>
                            <Icon name='stepbackward' size={40} color='black'></Icon>
                        </TouchableOpacity>

                        {/* 播放与暂停 */}
                        <TouchableOpacity onPress={() => changeVideo()}>
                            <Icon name={iconName} size={60} color='black'></Icon>
                        </TouchableOpacity>

                        {/* 下一首歌 */}
                        <TouchableOpacity onPress={() => playNextSong()}>
                            <Icon name='stepforward' size={40} color='black'></Icon>
                        </TouchableOpacity>
                    </View>

                    {/* 底部工具栏按钮 */}
                    <View style={{ width: w, display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', position: 'absolute', bottom: 14 }}>
                        <TouchableOpacity onPress={() => {
                            setModalVisible([true, false, false]);
                        }}>
                            <Icon name='clockcircleo' size={28}></Icon>
                            <Text>{timer == 0 ? '' : formatTime(timer)}</Text>
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => {
                            setModalVisible([false, true, false]);
                        }}>
                            <Icon name='message1' size={28}></Icon>
                            <Text></Text>
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => {
                            if (record == 'hearto') {
                                setRecord('heart');
                            } else {
                                setRecord('hearto');
                            }

                        }}>
                            <Icon name={record} size={28} style={record == 'heart' ? { color: 'red' } : { color: 'black' }}></Icon>
                            <Text></Text>
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => {
                            setModalVisible([false, false, true]);
                        }}>
                            <Icon name='bars' size={28}></Icon>
                            <Text></Text>
                        </TouchableOpacity>



                    </View>

                </View>

            </LinearGradient>



        </View>

    )
}

const styles = StyleSheet.create({
    pic: {
        marginTop: pth(30),
        width: ptd(300),
        height: ptd(300),
        borderRadius: 28
    },
    centeredView: {
        display: 'flex',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        paddingBottom: 30
    },
    modelSonItem: {
        display: 'flex',
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    }
})

export default Test

